<template>
  <div style="background-color:white;width: 100%;height:100%;overflow:scroll ">

    <div style="text-align: center;padding-top:15px">
      <span style="font-size:40px"> {{questionnaireInfo.name}}</span>

    </div>

    <div v-for="(item,index) in questionnaireInfo.list"
         :key="item"
         text-align:
         left>
      <div style="padding:10px">
        <div style="font-size:25px"
             v-if="index==0||questionnaireInfo.list[index].questionType!=questionnaireInfo.list[index-1].questionType">{{item.questionType}}</div>
        <div style="display:flex">

          <div style="font-size:23px;flex:4">{{item.sort}}. {{item.text}}</div>
          <div style="font-size:22px;flex:1">
            <el-popover placement="bottom"
                        title="介绍"
                        :width="200"
                        trigger="click"
                        :content='item.msg'>
              <template #reference>

                <el-icon>
                  <InfoFilled />
                </el-icon>

              </template>
            </el-popover>

          </div>
        </div>
        <el-card>
          <div style="font-size:20px">
            <el-radio-group v-model="item.radio"
                            style="display: flex;flex-flow: column nowrap;align-items: flex-start;"
                            class="
                            ml-4">

              <el-radio v-for="chird in item.list"
                        :key="chird"
                        text-align:left
                        :label='chird.mark'
                        size="large">
                <div style="font-size:19px">{{chird.mark}}</div>
              </el-radio>
              <el-input v-model="textarea2"
                        :autosize="{ minRows: 2}"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                        style="font-size:15px"
                        placeholder="输入你的建议" />
            </el-radio-group>
          </div>
        </el-card>
      </div>

    </div>
    <div style="text-align: center;margin-top=20px">
      <el-button @click="submit">提交</el-button>
    </div>
    <el-dialog v-model="submitOpen"
               title="是否提交问卷"
               width="30%"
               :before-close="handleClose">
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary"
                     @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup >

// 全量引入格式化工具 请按需保留
import {
  getDictFunc,
  formatDate,
  formatBoolean,
  filterDict,
  ReturnArrImg,
} from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, nextTick } from 'vue'
import { useRoute, useRouter } from "vue-router"
import { findQuestionnaireByUuid, getQuestionnaireInfo } from '@/api/questionnaire'
defineOptions({
  name: 'QuestionnaireContent',
})
const router = useRouter()
const uuid = ref(router.currentRoute.value.query.uuid)
const questionnaireInfo = ref({})
//获取问卷内容
const getQuestionnaire = async () => {
  const data = await getQuestionnaireInfo({ "uuid": uuid.value })
  questionnaireInfo.value = data.data.questionnaireInfo
}
getQuestionnaire()
const submitOpen = ref(false)
const submit = () => {
  submitOpen.value = true
}
</script>

<style scoped>
.el-radio.el-radio--large .el-radio__inner {
  width: 50px !important;
  height: 50px !important;
}
</style>